<template>
  <view class="h-44 px-16 disFlxJS">
    <!-- <view > -->
    <picker
      class="fz-14 default-color flex-1 fontTC disFlxAC disFlxJC"
      @change="ooperationTypChange"
      range-key="cooperationTypeName"
      :value="cooperationTypeSelected"
      :range="cooperationTypeList"
    >
      <text>
        {{ cooperationTypeList[cooperationTypeSelected]?.cooperationTypeName }}
      </text>
      <text class="ali-icon fz-8 ml-4">&#xe667;</text>
    </picker>
    <!-- </view> -->

    <picker
      v-if="showBoStatus"
      class="fz-14 default-color flex-1 fontTC disFlxAC disFlxJC"
      @change="boStatusChange"
      range-key="text"
      :value="boStatusSelected"
      :range="boStatusArr"
    >
      <text>
        {{ boStatusArr[boStatusSelected].text }}
      </text>
      <text class="ali-icon fz-8 ml-4">&#xe667;</text>
    </picker>

    <view
      class="fz-14 default-color flex-1 fontTC disFlxAC disFlxJC"
      @click="selectIndustryShow = true"
    >
      <text>{{ industryIdSelected.length ? '部分行业' : '全部行业' }}</text>
      <text class="ali-icon fz-8 ml-4">&#xe667;</text>
    </view>
    <view
      v-if="showSource"
      class="fz-14 default-color flex-1 fontTC disFlxAC disFlxJC"
      @click="handleSelectionSource"
    >
      <text>{{ sourceList[sourceSelected].name }}</text>
      <text class="ali-icon fz-8 ml-4">&#xe667;</text>
    </view>
  </view>

  <SelectIndustry
    v-model:show="selectIndustryShow"
    :is-api-data="true"
    :selected="industryIdSelected"
    result-key="code"
    sources-key="orgIndustryId"
    @submit="handleSelectIndustrySubmit"
  />
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import SelectIndustry from '@/components/SelectIndustry/index.vue';
  import { getCooperationTypeList } from '@/api/businessOpportunities';
  import type { ICooperationType } from '@/api/businessOpportunities/type';
  import { AssTypeEnum } from '@/enums/orderEnum';
  import { BoStatusEnum } from '@/enums/businessOpportunitiesEnum';

  defineProps({
    showSource: {
      type: Boolean,
      default: true,
    },
    showBoStatus: {
      type: Boolean,
      default: false,
    },
  });

  const boStatusSelected = ref<number>(0);
  const boStatusArr = ref<{ text: string; value: BoStatusEnum | undefined }[]>([
    { text: '全部状态', value: undefined },
    { text: '生效中', value: BoStatusEnum.Active },
    { text: '草稿', value: BoStatusEnum.Draft },
    { text: '已失效', value: BoStatusEnum.Invalid },
  ]);

  const boStatusChange = (e: { detail: { value: number } }) => {
    boStatusSelected.value = e.detail.value;
    handleChange();
  };

  const cooperationTypeList = ref<ICooperationType[]>([{ id: 0, cooperationTypeName: '全部类型' }]);

  onMounted(async () => {
    const res = await getCooperationTypeList();
    cooperationTypeList.value = [...cooperationTypeList.value, ...res];
  });

  const emits = defineEmits(['change']);

  const cooperationTypeSelected = ref<number>(0);

  function ooperationTypChange(e: { detail: { value: number } }) {
    cooperationTypeSelected.value = e.detail.value;
    handleChange();
  }

  const selectIndustryShow = ref(false);
  const industryIdSelected = ref<string[]>([]);
  function handleSelectIndustrySubmit(codes: string[]) {
    industryIdSelected.value = codes;
    handleChange();
  }

  const sourceList = ref([
    {
      name: '全部供需',
      type: null,
    },
    {
      name: '会内供需',
      type: AssTypeEnum.INNER,
    },
    {
      name: '会外供需',
      type: AssTypeEnum.OUTSIDE,
    },
  ]);
  const sourceSelected = ref<number>(0);
  function handleSelectionSource() {
    uni.showActionSheet({
      itemList: sourceList.value.map((v) => v.name),
      success: ({ tapIndex }) => {
        sourceSelected.value = tapIndex;
        handleChange();
      },
    });
  }

  function handleChange() {
    const source = sourceList.value[sourceSelected.value].type;
    const type = cooperationTypeList.value[cooperationTypeSelected.value].id;
    emits('change', {
      cooperationType: type ? [type] : null,
      source,
      industryIds: industryIdSelected.value,
      boStatus: boStatusArr.value[boStatusSelected.value].value,
    });
  }
</script>

<style scoped></style>
